<template>
	<view class="container clinicDetail-container">
		<view class="banner-box">
			<swiper class="swiper" circular :indicator-dots="swiperOption.indicatorDots" :autoplay="swiperOption.autoplay" :interval="swiperOption.interval"
				:duration="swiperOption.duration">
				<swiper-item v-for="(item,i) in clinicInfo.hospitalPicture" :key="i">
					<view class="swiper-item">
						<image mode="aspectFill" :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="pop-container">
			<uni-popup ref="pop" type="bottom">
				<view class="pop-content">
					<view class="title">{{clinicInfo.name}}</view>
					<!-- <text class="tag tag-2">公立医院</text> -->
					<view class="infos-box">
						<text class="infos">医馆规模:{{clinicInfo.hospitalScale}}人</text>
						<text class="infos">医馆类型:{{clinicInfo.institutionalType}}</text>
					</view>
					<view class="location-box">
						<view class="location">
							<text @click="openLocation">{{clinicInfo.hospitalSite}}</text>
							<view class="iconfont" style="font-size: 24rpx;">&#xe775;</view>
						</view>
						<view class="icons">
							<view class="iconfont" @click="openLocation">&#xe69f;</view>
							<view class="iconfont" @click="callPhone">&#xe61b;</view>
						</view>
					</view>
					<view class="scroll-title">健康管家</view>
					<!-- :category="item.stairOfficesDirector" -->
					<scroll-view :scroll-y="true" class="list-container" @scrolltolower="onReachButton">
						<list-card-vue v-for="item in clinicInfo.doctors" :key="item.id"
						:image="item.headPortrait"
						:name="item.name"
						:job="item.job"
						
						tag="认证医生"
						:belone="clinicInfo.name"
						:text="item.adeptIllness"
						:price="`￥${item.consultCost}/次`"
						btn-text="立即咨询"
						@buttonClick="goDoctorDetail(item)"
						@itemClick="goDoctorDetail(item)"
						@imageError="imageErr(item)"
						></list-card-vue>
						<view class="safe-zone"></view>
					</scroll-view>
				</view>
			</uni-popup>
			<view class="bottom-container">
				<view class="icon-box" @click="callPhone()">
					<view class="iconfont" style="font-size: 38rpx;">&#xec2e;</view>
					<view>联系医院</view>
				</view>
				<view class="btn-box">
					<button class="btn" @click="yoyaku()">到店预约</button>
					<!-- <button class="btn">挂号问诊</button> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import listCardVue from "@/components/list-card.vue"
	import {ref,reactive} from "vue"
	import {onLoad} from '@dcloudio/uni-app'
	import { jump } from "../../../untils/tools"
	import api from "../../../common/api";
	import {handleImageError, showToast,utilLogin} from "@/common/util.ts"
import { hideLoading, showLoading } from "../../../common/util";
	const swiperOption = {
		indicatorDots: true,
		autoplay: true,
		interval: 2000,
		duration: 500
	}
	const pop = ref(null)
	
	const clinicInfo = ref({
		name:'',
		hospitalScale:0,
		institutionalType:'',
		hospitalSite:'',
		adeptIllness:'',
		hospitalPicture:[],
		doctors:[]
	})
	//----- 系统钩子 start -----
	onLoad((option)=>{
		uni.setNavigationBarTitle({
			title:option.name
		})
		setTimeout(()=>{
			pop.value.open('bottom')
			pop.value.closeMask()
			
			getCilnicDetail(option.id)
		},500)
	})
	//----- 系统钩子 end -----
	
	//----- 一些逻辑 start -----
	const onReachButton = ()=>{
		console.log('到底了');
	}
	// const goAsking = (item)=>{
	// 	let name = clinicInfo.value.name
	// 	jump(`/pages/index/clinic/asking?name=${item.name}&doctorFirmQrCode=${item.doctorFirmQrCode}&clinicName=${name}&avater=${item.headPortrait}`)
	// }
	const yoyaku = ()=>{
		if (!utilLogin()) return
		jump(`/pages/index/clinic/toAsking?placeStoreId=${clinicInfo.value.doctors[0].placeStoreId}`)
	}
	const goDoctorDetail = (item)=>{
		jump(`/pages/index/clinic/doctorDetail?id=${item.id}`)
	}
	const imageErr = (item)=>{
		handleImageError(item,'headPortrait')
	}
	const openLocation = ()=>{
		const {latitude,longitude} = clinicInfo.value.siteCoordinate
		console.log(latitude,longitude);
		uni.openLocation({
			latitude:Number(latitude),
			longitude:Number(longitude)
		})
	}
	const callPhone = ()=>{
		uni.makePhoneCall({
			phoneNumber:clinicInfo.value.phone,
			fail: (err) => {
				if(err.errMsg === 'makePhoneCall:fail cancel'){
					showToast('取消拨打')
				}
			}
		})
	}
	//----- 一些逻辑 end -----
	
	
	//------ 调用接口 start --
	const getCilnicDetail = async (id)=>{
		showLoading()
		const res = await api.getClinicInfoByType({id})
		hideLoading()
		if(res?.data){
			clinicInfo.value = res.data
			clinicInfo.value.doctors.forEach(item=>{
				item.adeptIllness = (item.adeptIllnessJson.map(jack=>{
					return jack.name
				})).join('')
			})
		}
	}
	
	//------ 调用接口 end ----
</script>

<style lang="scss">
		.clinicDetail-container{
			.banner-box{
				.swiper {
					height: 28vh;
				}
				.swiper-item {
					display: block;
					// height: 448rpx;
					// line-height: 448rpx;
					text-align: center;
					image{
						width: 100%;
						// height: 448rpx;
					}
				}
			}
			.pop-container{
				.pop-content{
					border-radius: 12px 12px 0 0;
					height: 70vh;
					width: 100%;
					background: linear-gradient( 180deg, #FFFFFF 0%, #FFFFFF 23%, #F2F3F8 30%, #F2F3F8 100%);
					padding: 30rpx 30rpx;
					.title{
						font-size: 38rpx;
						font-weight: 600;
					}
					.tag{
						display: inline-block;
						margin: 10rpx 0;
						border-radius: 8rpx;
						padding: 5rpx 10rpx;
					}
					.tag-1{
						background-color: rgba(58, 211, 193, 0.20);
						color: rgba(41, 159, 145, 1);
					}
					.tag-2{
						background-color: rgba(255, 170, 0, 0.2);
						color: rgba(255, 170, 0, 1.0);
					}
					
					.infos-box{
						padding: 10rpx 0;
						border-bottom: 1rpx solid rgba(224,223,225,1);
						.infos{
							color: #6D6D6D;
							display: inline-block;
							margin-right: 60rpx;
							position: relative;
							margin-left: 19rpx;
							font-size: 24rpx;
							&::before{
								content: "";
								position: absolute;
								left: -18rpx;
								top: 13rpx;
								width: 12rpx;
								height: 12rpx;
								background-color: #6D6D6D;
								border-radius: 50%;
							}
						}
					}
					
				
					.location-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20rpx 0;
						.iconfont{
							font-size: 34rpx;
						}
						.location{
							width: 74%;
							display: flex;
							align-items: center;
							color: #6D6D6D;
							font-size: 24rpx;
							.iconfont{
								transform: translateY(2rpx);
							}
						}
						.icons{
							width: 22%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.iconfont{
								background-color: rgba(242,243,248,1);
								padding: 10rpx;
								
							}
						}
					}
					
					.scroll-title{ 
						padding: 10rpx 0;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #202020;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}
					.list-container{
						box-sizing: border-box;
						height: 900rpx;
						background-color: #F2F3F8;
						.safe-zone{
							width: 100%;
							height: 400rpx;
						}
					}
				}
			}
			.bottom-container{
				position: fixed;
				z-index: 999;
				width: 100%;
				height: 120rpx;
				background-color: #FFFFFF;
				bottom: 0;
				padding: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;
				color: #6D6D6D;
				.icon-box{
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				.btn-box{
					// width: 65%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.btn{
						padding: 0 36rpx;
						background: linear-gradient( 135deg, #6CEBE2 0%, #3AD3C1 100%);
						border-radius: 43rpx;
						color: #FFFFFF;
						font-size: 30rpx;
					}
				}
			}
		}
</style>
